import Vue from 'vue'
import Vuex from 'vuex'
import {
  optionLine,
  optionBar,
  optionPie,
  optionGauge,
  optionTable,
  optionSum,
  optionScrollTable
} from '../chart/allCharts.js'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {},
    // 主页
    system: {
      setting: '',
      subsystem: {
        setting: []
      },
      surrentSubSystem: null,
    },
    token: localStorage.getItem("token"),
    detailTitle: "",
    detailTime: "",
    detailContent: "",
    detailCountry: "",
    // 通用
    // 分页组件 一页的数量
    pageSize: 10,
    // 分页组件当前页
    currentPage: 1,
    // 总条数
    total: 0,
    // 国家疫情
    // 分页组件 一页的数量
    CpageSize: 10,
    // 分页组件当前页
    CcurrentPage: 1,
    // 总条数
    Ctotal: 0,
    // 检出阳性
    // 分页组件 一页的数量
    JpageSize: 10,
    // 分页组件当前页
    JcurrentPage: 1,
    // 总条数
    Jtotal: 0,
    // 控制哪个弹窗框的分页插件数据变化
    isThis: 1,
    ship: {
      // ship 关区名称
      shipCustom: '湛江海关',
      // 关区
      shipCustomhouse: '',
      // ship 折线图标题
      lineMonthTitle: '',
      lineDayTitle: '',

    },
    addPanel: {
      panelArr: [{
        id: 0,
        panelPath: '/table',
        panelName: 'table',
        imgPath: require("../assets/images/panel/chartIcon/icon_table.svg"),
        name: "Table Chart",
        desc: "Supports many column styles"
      },
      {
        id: 4,
        panelPath: '/line',
        panelName: 'line',
        imgPath: require("../assets/images/panel/chartIcon/icon_line.svg"),
        name: "Line Chart",
        desc: ""
      },
      {
        id: 1,
        panelPath: '/bar',
        panelName: 'bar',
        imgPath: require("../assets/images/panel/chartIcon/icon_bar.svg"),
        name: "Bar Chart",
        desc: ""
      },
      {
        id: 2,
        panelPath: '/gauge',
        panelName: 'gauge',
        imgPath: require("../assets/images/panel/chartIcon/icon_guage.svg"),
        name: "Gauge Chart",
        desc: ""
      },
      {
        id: 3,
        panelPath: '/pie',
        panelName: 'pie',
        imgPath: require("../assets/images/panel/chartIcon/icon_pie.svg"),
        name: "Pie Chart",
        desc: ""
      },
      {
        id: 5,
        panelPath: '/sum',
        panelName: 'sum',
        imgPath: require("../assets/images/panel/chartIcon/icon_text.svg"),
        name: "Sum Chart",
        desc: ""
      },
      {
        id: 6,
        panelPath: '/table',
        panelName: 'scrolltable',
        imgPath: require("../assets/images/panel/chartIcon/icon_table.svg"),
        name: "Scroll Table",
        desc: "Supports many column styles"
      },
      ],
      currentPanelName: undefined,
    },
    optionLine: optionLine,
    optionBar: optionBar,
    optionPie: optionPie,
    optionGauge: optionGauge,
    optionTable: optionTable,
    optionSum: optionSum,
    optionScrollTable: optionScrollTable,
    // SQL
    sqlData: [],
    sqlSource: {},
    sqlStr: '',
    sqlParam: '',

    // 渲染数据
    sqlHandle: '',
    sqlHandleData: [],

    // 渲染图表XY轴对应字段
    selectPanelData: {},
  },
  getters: {
    getReqChartParams: (state) => {
      const panelType = state.addPanel.currentPanelName;
      const chartOption = {
        line: 'optionLine',
        bar: 'optionBar',
        pie: 'optionPie',
        gauge: 'optionGauge',
        table: 'optionTable',
        sum: 'optionSum',
        scrolltable: 'optionScrollTable'
      }[panelType];
      const optionInfo = state[chartOption];
      const reqChartJson = JSON.stringify({
        ...optionInfo,
        extInfo: ['bar', 'line'].includes(panelType) ? state.selectPanelData : null,
      });
      return {
        chartType: panelType,
        // 图表配置
        chartJson: reqChartJson,
        // 处理函数
        chartHTML: state.sqlHandle,
      }
    },
    getReqSQLParams: (state) => {
      return {
        sql: state.sqlStr,
        // 数据源
        dataSourceId: state.sqlSource.dataSourceId,
        // 请求参数
        ortherData: state.sqlParam,
      }
    },
    getUserInfo: (state) => {
      return state.user;
    },
    // 用户名
    getUserAccount: (state) => {
      return state.user.userName;
    },
    // 用户id
    getUserId: (state) => {
      return state.user.id;
    },
    // 用户头像
    getUserAvatar: (state) => {
      return state.user.avatar;
    },
    // 用户email
    getUserEmail: (state) => {
      return state.user.email;
    },
    // 用户电话
    getUserPhone: (state) => {
      return state.user.phone;
    },
    getToken: (state) => {
      return state.token;
    },
    // 角色信息
    getRoleMsg: (state) => {
      return state.user.role;
    },
    // 主页
    getSystemMsg: (state) => {
      return state.system.setting;
    },
    getSubsystem: (state) => {
      return state.system.subsystem.setting;
    },
    getDetailTitle: (state) => {
      return state.detailTitle;
    },
    getDetailTime: (state) => {
      return state.detailTime
    },
    getDetailContent: (state) => {
      return state.detailContent;
    },
    getDetailCountry: (state) => {
      return state.detailCountry
    },
    getPageSize: (state) => {
      return state.pageSize;
    },
    getCurrentPage: (state) => {
      return state.currentPage;
    },
    getTotal: (state) => {
      return state.total
    },
    getCPageSize: (state) => {
      return state.CpageSize;
    },
    getCCurrentPage: (state) => {
      return state.CcurrentPage;
    },
    getCTotal: (state) => {
      return state.Ctotal
    },
    getJPageSize: (state) => {
      return state.JpageSize;
    },
    getJCurrentPage: (state) => {
      return state.JcurrentPage;
    },
    getJTotal: (state) => {
      return state.Jtotal;
    },
    getIsThis: (state) => {
      return state.isThis;
    },

    // 获取候选的panel
    getPanelArr: (state) => (props) => {
      return state.addPanel.panelArr.filter((val) => {
        return val.name.includes(props);
      })
    },
    // 获取当前选的panel
    getCurrentPanelName: (state) => {
      return state.addPanel.currentPanelName;
    },
    // option
    getOptionBar: (state) => {
      return state.optionBar;
    },
    getOptionLine: (state) => {
      return state.optionLine;
    },
    getOptionPie: (state) => {
      return state.optionPie;
    },
    getOptionGauge: (state) => {
      return state.optionGauge;
    },
    getOptionSum: (state) => {
      return state.optionSum;
    },
    getOptionTable: (state) => {
      return state.optionTable;
    },
    getOptionScrollTable: (state) => {
      return state.optionScrollTable
    },
    // 获取SQL请求
    getSQLData: (state) => {
      return state.sqlData;
    },

    // 处理SQL数据
    getSqlHandleData: (state) => {
      return state.sqlHandleData;
    },

    // 获取横纵坐标
    getSelectPanelXData: (state) => {
      return state.selectPanelData.x;
    },
    getSelectPanelYData: (state) => {
      return state.selectPanelData.y;
    }

  },
  mutations: {
    changeTypeOption(state, props) {
      const { baseOption, chartType } = props;
      const chartOption = {
        line: "optionLine",
        bar: "optionBar",
        pie: "optionPie",
        gauge: "optionGauge",
        table: "optionTable",
        sum: "optionSum",
        scrolltable: "optionScrollTable",
      }[chartType];
      const oldInfo = state[chartOption];
      state[chartOption] = {
        ...oldInfo,
        baseOption,
      }
    },
    changeOutBrebkInfoDetail(state, props) {
      state.detailTitle = props.detailTitle;
      state.detailTime = props.detailTime;
      state.detailContent = props.detailContent;
      state.detailCountry = props.detailCountry;
    },
    changeCurrentPage(state, props) {
      state.currentPage = props
    },
    changePageSize(state, props) {
      state.pageSize = props
    },
    changeTotal(state, props) {
      state.total = props;
    },
    changeCCurrentPage(state, props) {
      state.CcurrentPage = props
    },
    changeCPageSize(state, props) {
      state.CpageSize = props
    },
    changeCTotal(state, props) {
      state.Ctotal = props;
    },
    changeJCurrentPage(state, props) {
      state.JcurrentPage = props
    },
    changeJPageSize(state, props) {
      state.JpageSize = props
    },
    changeJTotal(state, props) {
      state.Jtotal = props;
    },
    changeIsThis(state, props) {
      state.isThis = props
    },
    changeShipCustom(state, props) {
      state.ship.shipCustom = props;
    },
    changeShipCustomhouse(state, props) {
      state.ship.shipCustomhouse = props;
    },
    changeShipLineMonthTitle(state, props) {
      state.ship.lineMonthTitle = props;
    },
    changeShipLineDayTitle(state, props) {
      state.ship.lineDayTitle = props;
    },
    // 图表
    setOptionLine(state, props) {
      state.optionLine = props
    },
    setOptionBar(state, props) {
      state.optionBar = props
    },
    setOptionPie(state, props) {
      state.optionPie = props;
    },
    setOptionGauge(state, props) {
      state.optionGauge = props;
    },
    setOptionTable(state, props) {
      state.optionTable = props;
    },
    setOptionScrollTable(state, props) {
      state.optionScrollTable = props;
    },
    setOptionSum(state, props) {
      state.optionSum = props;
    },


    // 设置当前选的表格类型
    setPanelPath(state, props) {
      const { panelName } = props;
      state.addPanel.currentPanelName = panelName;
    },

    // 获取数据库结果
    setSQLData(state, props) {
      const { sqlData,
        sqlStr, sqlParam,
        sqlSource, } = props;
      // if (sqlData) {
      //   state.sqlData = sqlData;
      // }
      state.sqlData = sqlData;
      if (sqlSource) {
        if (sqlSource.dataSourceId) {
          state.sqlSource = sqlSource;
        } else {
          state.sqlSource = { dataSourceId: sqlSource };
        }
      }
      state.sqlStr = sqlStr;
      state.sqlParam = sqlParam;
    },

    // 获取数据库结果
    setSQLHandleData(state, props) {
      const { sqlHandle,
        sqlHandleData, } = props;
      if (sqlHandle) {
        state.sqlHandle = sqlHandle;
      }
      state.sqlHandleData = [...sqlHandleData];
    },
    // 获取数据库结果
    setTableShowXYData(state, props) {
      const { selectPanelData } = props;
      state.selectPanelData = selectPanelData;
    },

    // 修改用户全部信息
    setUserInfo(state, props) {
      state.user = props;
    },
    // 用户信息
    setUserAccount(state, props) {
      state.user.account = props;
    },
    setToken(state, props) {
      state.token = props;
      localStorage.setItem('token', props);
    },
    setUserId(state, props) {
      state.user.id = props;
    },
    // 角色信息
    setRoleMsg(state, props) {
      state.user.role = props;
    },
    // 主页
    setSystemMsg(state, props) {
      state.system.setting = props;
    },
    setSubSytem(state, props) {
      state.system.subsystem.setting = props;
    },
    setSubSystemInfo(state, props) {
      state.system.surrentSubSystem = props;
    }
  },
  actions: {},
  modules: {}
})